<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜谱选择 - 今天吃什么</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B35',
                        secondary: '#2E4057',
                        accent: '#F7C548',
                        light: '#F8F9FA',
                        dark: '#212529'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-[clamp(1.25rem,5vw,1.75rem)] font-bold text-primary flex items-center">
                <i class="fa fa-cutlery mr-2"></i>
                <span>菜谱选择</span>
            </h1>
            <div class="flex items-center space-x-4">
                <button id="randomBtn" class="bg-accent hover:bg-amber-400 text-dark px-3 py-2 rounded-full shadow transition-all flex items-center">
                    <i class="fa fa-random mr-1"></i>
                    <span class="hidden sm:inline">随机推荐</span>
                </button>
                <button id="addRecipeBtn" class="bg-primary hover:bg-orange-600 text-white px-3 py-2 rounded-full shadow transition-all">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-20 pb-24">
        <!-- 搜索栏 -->
        <div class="relative mb-6 mt-4">
            <input 
                type="text" 
                id="searchInput" 
                placeholder="搜索菜谱..." 
                class="w-full py-3 px-5 pr-12 rounded-xl shadow-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
            >
            <i class="fa fa-search absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>

        <!-- 分类标签 -->
        <div class="flex overflow-x-auto pb-2 mb-6 gap-2 hide-scrollbar">
            <button class="category-btn bg-primary text-white px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="all">全部</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="家常菜">家常菜</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="川菜">川菜</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="粤菜">粤菜</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="素食">素食</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="汤品">汤品</button>
            <button class="category-btn bg-white text-dark px-4 py-2 rounded-full whitespace-nowrap shadow-sm" data-category="主食">主食</button>
        </div>

        <!-- 菜谱列表 -->
        <div id="recipeList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 菜谱卡片将通过JavaScript动态生成 -->
        </div>

        <!-- 空状态提示 -->
        <div id="emptyState" class="hidden flex flex-col items-center justify-center py-16 text-center">
            <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                <i class="fa fa-utensils text-4xl text-gray-400"></i>
            </div>
            <h3 class="text-xl font-semibold mb-2">还没有菜谱</h3>
            <p class="text-gray-500 mb-6 max-w-md">点击右上角的"+"按钮添加你的第一个菜谱，或者使用我们的默认菜谱</p>
            <button id="loadDefaultsBtn" class="bg-primary hover:bg-orange-600 text-white px-6 py-3 rounded-full shadow transition-all">
                加载默认菜谱
            </button>
        </div>

        <!-- 随机推荐结果 -->
        <div id="randomRecipeModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[80vh] overflow-y-auto transform transition-all">
                <div class="p-6 border-b">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-2xl font-bold text-primary">今日推荐</h2>
                        <button id="closeRandomModal" class="text-gray-500 hover:text-gray-700">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                    <div id="randomRecipeContent" class="space-y-4">
                        <!-- 随机推荐内容将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="p-4 bg-gray-50 flex justify-end">
                    <button id="anotherRandomBtn" class="bg-accent hover:bg-amber-400 text-dark px-4 py-2 rounded-full shadow transition-all">
                        再换一个
                    </button>
                </div>
            </div>
        </div>

        <!-- 添加菜谱表单 -->
        <div id="addRecipeModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[80vh] overflow-y-auto">
                <div class="p-6 border-b">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-2xl font-bold text-primary">添加菜谱</h2>
                        <button id="closeAddModal" class="text-gray-500 hover:text-gray-700">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                    <form id="addRecipeForm" class="space-y-4">
                        <div>
                            <label for="recipeName" class="block text-sm font-medium text-gray-700 mb-1">菜谱名称</label>
                            <input type="text" id="recipeName" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                        </div>
                        <div>
                            <label for="recipeCategory" class="block text-sm font-medium text-gray-700 mb-1">分类</label>
                            <select id="recipeCategory" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                                <option value="">选择分类</option>
                                <option value="家常菜">家常菜</option>
                                <option value="川菜">川菜</option>
                                <option value="粤菜">粤菜</option>
                                <option value="素食">素食</option>
                                <option value="汤品">汤品</option>
                                <option value="主食">主食</option>
                            </select>
                        </div>
                        <div>
                            <label for="recipeIngredients" class="block text-sm font-medium text-gray-700 mb-1">食材</label>
                            <textarea id="recipeIngredients" rows="3" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入食材，用逗号分隔"></textarea>
                        </div>
                        <div>
                            <label for="recipeInstructions" class="block text-sm font-medium text-gray-700 mb-1">做法步骤</label>
                            <textarea id="recipeInstructions" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入做法步骤，每步换行"></textarea>
                        </div>
                        <div>
                            <label for="recipeImage" class="block text-sm font-medium text-gray-700 mb-1">图片URL（可选）</label>
                            <input type="url" id="recipeImage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="输入图片的网络地址">
                        </div>
                    </form>
                </div>
                <div class="p-4 bg-gray-50 flex justify-end gap-3">
                    <button id="cancelAddBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-full shadow transition-all">
                        取消
                    </button>
                    <button id="saveRecipeBtn" class="bg-primary hover:bg-orange-600 text-white px-4 py-2 rounded-full shadow transition-all">
                        保存
                    </button>
                </div>
            </div>
        </div>

        <!-- 菜谱详情 -->
        <div id="recipeDetailModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
                <div class="relative h-64">
                    <img id="detailImage" src="" alt="菜谱图片" class="w-full h-full object-cover rounded-t-2xl">
                    <button id="closeDetailModal" class="absolute top-4 right-4 bg-black/50 text-white w-8 h-8 rounded-full flex items-center justify-center backdrop-blur-sm">
                        <i class="fa fa-times"></i>
                    </button>
                    <button id="toggleFavoriteBtn" class="absolute top-4 left-4 bg-black/50 text-white w-8 h-8 rounded-full flex items-center justify-center backdrop-blur-sm">
                        <i id="favoriteIcon" class="fa fa-heart-o"></i>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h2 id="detailName" class="text-2xl font-bold text-dark"></h2>
                            <span id="detailCategory" class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm mt-1"></span>
                        </div>
                        <button id="deleteRecipeBtn" class="text-red-500 hover:text-red-700 flex items-center text-sm">
                            <i class="fa fa-trash mr-1"></i> 删除
                        </button>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-3 flex items-center">
                            <i class="fa fa-shopping-basket text-primary mr-2"></i> 食材
                        </h3>
                        <ul id="detailIngredients" class="grid grid-cols-2 gap-2 text-gray-700"></ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3 flex items-center">
                            <i class="fa fa-list-ol text-primary mr-2"></i> 做法步骤
                        </h3>
                        <ol id="detailInstructions" class="space-y-3 text-gray-700 list-decimal pl-5"></ol>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-40">
        <div class="container mx-auto">
            <div class="flex justify-around py-3">
                <button class="nav-btn active flex flex-col items-center justify-center text-primary" data-view="all">
                    <i class="fa fa-th-large text-xl mb-1"></i>
                    <span class="text-xs">全部</span>
                </button>
                <button class="nav-btn flex flex-col items-center justify-center text-gray-500" data-view="favorites">
                    <i class="fa fa-heart text-xl mb-1"></i>
                    <span class="text-xs">收藏</span>
                </button>
                <button class="nav-btn flex flex-col items-center justify-center text-gray-500" data-view="categories">
                    <i class="fa fa-tags text-xl mb-1"></i>
                    <span class="text-xs">分类</span>
                </button>
                <button class="nav-btn flex flex-col items-center justify-center text-gray-500" data-view="settings">
                    <i class="fa fa-cog text-xl mb-1"></i>
                    <span class="text-xs">设置</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 菜谱数据管理
        class RecipeManager {
            constructor() {
                this.recipes = [];
                this.loadFromLocalStorage();
            }

            // 从本地存储加载数据
            loadFromLocalStorage() {
                const saved = localStorage.getItem('recipes');
                if (saved) {
                    this.recipes = JSON.parse(saved);
                }
            }

            // 保存数据到本地存储
            saveToLocalStorage() {
                localStorage.setItem('recipes', JSON.stringify(this.recipes));
            }

            // 获取所有菜谱
            getAllRecipes() {
                return [...this.recipes];
            }

            // 根据分类获取菜谱
            getRecipesByCategory(category) {
                if (category === 'all') return this.getAllRecipes();
                return this.recipes.filter(recipe => recipe.category === category);
            }

            // 获取收藏的菜谱
            getFavoriteRecipes() {
                return this.recipes.filter(recipe => recipe.isFavorite);
            }

            // 随机获取一个菜谱
            getRandomRecipe() {
                if (this.recipes.length === 0) return null;
                const randomIndex = Math.floor(Math.random() * this.recipes.length);
                return this.recipes[randomIndex];
            }

            // 添加新菜谱
            addRecipe(recipe) {
                const newRecipe = {
                    id: Date.now().toString(),
                    isFavorite: false,
                    ...recipe
                };
                this.recipes.push(newRecipe);
                this.saveToLocalStorage();
                return newRecipe;
            }

            // 更新菜谱
            updateRecipe(id, updatedData) {
                const index = this.recipes.findIndex(recipe => recipe.id === id);
                if (index !== -1) {
                    this.recipes[index] = { ...this.recipes[index], ...updatedData };
                    this.saveToLocalStorage();
                    return this.recipes[index];
                }
                return null;
            }

            // 删除菜谱
            deleteRecipe(id) {
                const initialLength = this.recipes.length;
                this.recipes = this.recipes.filter(recipe => recipe.id !== id);
                this.saveToLocalStorage();
                return initialLength > this.recipes.length;
            }

            // 切换菜谱的收藏状态
            toggleFavorite(id) {
                const recipe = this.recipes.find(r => r.id === id);
                if (recipe) {
                    recipe.isFavorite = !recipe.isFavorite;
                    this.saveToLocalStorage();
                    return recipe.isFavorite;
                }
                return false;
            }

            // 搜索菜谱
            searchRecipes(query) {
                if (!query) return this.getAllRecipes();
                const lowerQuery = query.toLowerCase();
                return this.recipes.filter(recipe => 
                    recipe.name.toLowerCase().includes(lowerQuery) ||
                    recipe.ingredients.toLowerCase().includes(lowerQuery) ||
                    recipe.instructions.toLowerCase().includes(lowerQuery) ||
                    recipe.category.toLowerCase().includes(lowerQuery)
                );
            }

            // 加载默认菜谱
            loadDefaultRecipes() {
                const defaultRecipes = [
                    {
                        name: "宫保鸡丁",
                        category: "川菜",
                        ingredients: "鸡胸肉,花生米,黄瓜,胡萝卜,干辣椒,葱姜蒜,生抽,料酒,白糖,盐,淀粉",
                        instructions: "1. 鸡胸肉切丁，用料酒、盐、淀粉腌制15分钟\n2. 黄瓜、胡萝卜切丁，花生米提前炸熟\n3. 热锅冷油，爆香葱姜蒜和干辣椒\n4. 放入鸡丁翻炒至变色\n5. 加入生抽、白糖调味，放入黄瓜丁、胡萝卜丁翻炒\n6. 最后加入花生米，翻炒均匀即可出锅",
                        image: "https://picsum.photos/seed/kungpao/400/300",
                        isFavorite: false,
                        id: "default-1"
                    },
                    {
                        name: "番茄炒蛋",
                        category: "家常菜",
                        ingredients: "番茄,鸡蛋,葱,盐,糖,食用油",
                        instructions: "1. 番茄切块，鸡蛋打散加少许盐\n2. 热锅倒油，倒入鸡蛋液快速炒散，盛出备用\n3. 同一锅中加少许油，放入番茄块翻炒\n4. 加入适量糖和盐调味\n5. 倒入炒好的鸡蛋，翻炒均匀\n6. 撒上葱花即可出锅",
                        image: "https://picsum.photos/seed/tomatoegg/400/300",
                        isFavorite: false,
                        id: "default-2"
                    },
                    {
                        name: "清蒸鱼",
                        category: "粤菜",
                        ingredients: "鲜鱼,姜丝,葱丝,蒸鱼豉油,食用油",
                        instructions: "1. 鱼处理干净，在表面划几刀，用盐腌制10分钟\n2. 盘子底部铺姜丝，将鱼放在上面\n3. 蒸锅水烧开后，放入鱼蒸8-10分钟\n4. 取出后倒掉盘中的水，撒上葱丝\n5. 淋上热油激香，再淋上蒸鱼豉油即可",
                        image: "https://picsum.photos/seed/steamedfish/400/300",
                        isFavorite: false,
                        id: "default-3"
                    },
                    {
                        name: "炒时蔬",
                        category: "素食",
                        ingredients: "青菜,蒜末,盐,食用油",
                        instructions: "1. 青菜洗净切段\n2. 热锅冷油，爆香蒜末\n3. 放入青菜大火快速翻炒\n4. 加入适量盐调味\n5. 炒至青菜变软即可出锅",
                        image: "https://picsum.photos/seed/vegetables/400/300",
                        isFavorite: false,
                        id: "default-4"
                    },
                    {
                        name: "紫菜蛋花汤",
                        category: "汤品",
                        ingredients: "紫菜,鸡蛋,葱花,盐,香油,白胡椒粉",
                        instructions: "1. 锅中加水烧开\n2. 鸡蛋打散，缓缓倒入锅中，形成蛋花\n3. 放入紫菜煮1分钟\n4. 加入盐、白胡椒粉调味\n5. 关火，滴几滴香油，撒上葱花即可",
                        image: "https://picsum.photos/seed/soup/400/300",
                        isFavorite: false,
                        id: "default-5"
                    },
                    {
                        name: "扬州炒饭",
                        category: "主食",
                        ingredients: "米饭,鸡蛋,火腿,胡萝卜,青豆,玉米粒,盐,胡椒粉,食用油",
                        instructions: "1. 鸡蛋打散，火腿、胡萝卜切丁\n2. 热锅冷油，倒入鸡蛋液炒散盛出\n3. 同一锅中加油，放入火腿丁、胡萝卜丁、青豆、玉米粒翻炒\n4. 加入米饭翻炒均匀\n5. 放入炒好的鸡蛋，加盐和胡椒粉调味\n6. 翻炒均匀即可出锅",
                        image: "https://picsum.photos/seed/friedrice/400/300",
                        isFavorite: false,
                        id: "default-6"
                    }
                ];

                // 避免重复添加默认菜谱
                const existingIds = this.recipes.map(r => r.id);
                const newRecipes = defaultRecipes.filter(r => !existingIds.includes(r.id));
                
                this.recipes = [...this.recipes, ...newRecipes];
                this.saveToLocalStorage();
                return newRecipes;
            }
        }

        // UI控制器
        class UIController {
            constructor(recipeManager) {
                this.recipeManager = recipeManager;
                this.currentView = 'all';
                this.currentCategory = 'all';
                this.currentSearchQuery = '';
                this.initEventListeners();
                this.renderRecipes();
            }

            // 初始化事件监听器
            initEventListeners() {
                // 导航按钮
                document.querySelectorAll('.nav-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.currentView = btn.dataset.view;
                        document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active', 'text-primary'));
                        document.querySelectorAll('.nav-btn').forEach(b => b.classList.add('text-gray-500'));
                        btn.classList.add('active', 'text-primary');
                        btn.classList.remove('text-gray-500');
                        this.renderRecipes();
                    });
                });

                // 分类按钮
                document.querySelectorAll('.category-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        this.currentCategory = btn.dataset.category;
                        document.querySelectorAll('.category-btn').forEach(b => {
                            b.classList.remove('bg-primary', 'text-white');
                            b.classList.add('bg-white', 'text-dark');
                        });
                        btn.classList.remove('bg-white', 'text-dark');
                        btn.classList.add('bg-primary', 'text-white');
                        this.renderRecipes();
                    });
                });

                // 搜索输入
                document.getElementById('searchInput').addEventListener('input', (e) => {
                    this.currentSearchQuery = e.target.value;
                    this.renderRecipes();
                });

                // 随机推荐按钮
                document.getElementById('randomBtn').addEventListener('click', () => {
                    this.showRandomRecipe();
                });

                // 添加菜谱按钮
                document.getElementById('addRecipeBtn').addEventListener('click', () => {
                    this.openAddRecipeModal();
                });

                // 关闭添加菜谱模态框
                document.getElementById('closeAddModal').addEventListener('click', () => {
                    this.closeAddRecipeModal();
                });

                document.getElementById('cancelAddBtn').addEventListener('click', () => {
                    this.closeAddRecipeModal();
                });

                // 保存菜谱
                document.getElementById('saveRecipeBtn').addEventListener('click', () => {
                    this.saveRecipe();
                });

                // 关闭随机推荐模态框
                document.getElementById('closeRandomModal').addEventListener('click', () => {
                    this.closeRandomRecipeModal();
                });

                // 再换一个随机推荐
                document.getElementById('anotherRandomBtn').addEventListener('click', () => {
                    this.showRandomRecipe();
                });

                // 关闭详情模态框
                document.getElementById('closeDetailModal').addEventListener('click', () => {
                    this.closeRecipeDetailModal();
                });

                // 加载默认菜谱
                document.getElementById('loadDefaultsBtn').addEventListener('click', () => {
                    this.recipeManager.loadDefaultRecipes();
                    this.renderRecipes();
                });

                // 导航栏滚动效果
                window.addEventListener('scroll', () => {
                    const navbar = document.getElementById('navbar');
                    if (window.scrollY > 10) {
                        navbar.classList.add('py-2', 'shadow');
                        navbar.classList.remove('py-3');
                    } else {
                        navbar.classList.add('py-3');
                        navbar.classList.remove('py-2', 'shadow');
                    }
                });
            }

            // 获取要显示的菜谱
            getFilteredRecipes() {
                let recipes = [];
                
                // 根据当前视图筛选
                switch (this.currentView) {
                    case 'all':
                        recipes = this.recipeManager.getAllRecipes();
                        break;
                    case 'favorites':
                        recipes = this.recipeManager.getFavoriteRecipes();
                        break;
                    // 其他视图可以在这里添加
                    default:
                        recipes = this.recipeManager.getAllRecipes();
                }
                
                // 根据分类筛选
                if (this.currentCategory !== 'all') {
                    recipes = recipes.filter(recipe => recipe.category === this.currentCategory);
                }
                
                // 根据搜索关键词筛选
                if (this.currentSearchQuery) {
                    const query = this.currentSearchQuery.toLowerCase();
                    recipes = recipes.filter(recipe => 
                        recipe.name.toLowerCase().includes(query) ||
                        recipe.ingredients.toLowerCase().includes(query) ||
                        recipe.instructions.toLowerCase().includes(query) ||
                        recipe.category.toLowerCase().includes(query)
                    );
                }
                
                return recipes;
            }

            // 渲染菜谱列表
            renderRecipes() {
                const recipes = this.getFilteredRecipes();
                const recipeList = document.getElementById('recipeList');
                const emptyState = document.getElementById('emptyState');
                
                recipeList.innerHTML = '';
                
                if (recipes.length === 0) {
                    recipeList.classList.add('hidden');
                    emptyState.classList.remove('hidden');
                    return;
                }
                
                recipeList.classList.remove('hidden');
                emptyState.classList.add('hidden');
                
                recipes.forEach(recipe => {
                    const recipeCard = document.createElement('div');
                    recipeCard.className = 'bg-white rounded-xl shadow-sm overflow-hidden card-hover';
                    recipeCard.innerHTML = `
                        <div class="relative h-48">
                            <img src="${recipe.image || 'https://picsum.photos/seed/food/400/300'}" alt="${recipe.name}" class="w-full h-full object-cover">
                            ${recipe.isFavorite ? 
                                '<span class="absolute top-2 right-2 bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center"><i class="fa fa-heart text-xs"></i></span>' : 
                                ''}
                            <span class="absolute top-2 left-2 bg-white/80 backdrop-blur-sm text-dark px-2 py-1 rounded text-xs">${recipe.category}</span>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-lg mb-2 line-clamp-1">${recipe.name}</h3>
                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">${this.getIngredientsPreview(recipe.ingredients)}</p>
                            <button class="view-recipe-btn w-full bg-gray-100 hover:bg-gray-200 text-dark py-2 rounded-lg transition-colors" data-id="${recipe.id}">
                                查看详情
                            </button>
                        </div>
                    `;
                    
                    recipeList.appendChild(recipeCard);
                    
                    // 添加查看详情事件
                    recipeCard.querySelector('.view-recipe-btn').addEventListener('click', () => {
                        this.showRecipeDetail(recipe.id);
                    });
                });
            }

            // 获取食材预览
            getIngredientsPreview(ingredients) {
                const ingArray = ingredients.split(',');
                return ingArray.slice(0, 3).join('、') + (ingArray.length > 3 ? '...' : '');
            }

            // 显示随机推荐
            showRandomRecipe() {
                const randomRecipe = this.recipeManager.getRandomRecipe();
                const modal = document.getElementById('randomRecipeModal');
                const content = document.getElementById('randomRecipeContent');
                
                if (!randomRecipe) {
                    content.innerHTML = `
                        <div class="text-center py-6">
                            <i class="fa fa-exclamation-circle text-3xl text-gray-400 mb-3"></i>
                            <p class="text-gray-500">没有菜谱可供推荐，请先添加菜谱</p>
                        </div>
                    `;
                } else {
                    content.innerHTML = `
                        <div class="relative h-48 rounded-lg overflow-hidden mb-4">
                            <img src="${randomRecipe.image || 'https://picsum.photos/seed/food/400/300'}" alt="${randomRecipe.name}" class="w-full h-full object-cover">
                            <span class="absolute top-2 left-2 bg-primary text-white px-2 py-1 rounded text-xs">${randomRecipe.category}</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">${randomRecipe.name}</h3>
                        <div class="mb-4">
                            <h4 class="text-sm font-medium text-gray-500 mb-1">食材：</h4>
                            <p class="text-sm text-gray-700">${this.getIngredientsPreview(randomRecipe.ingredients)}</p>
                        </div>
                        <button class="view-recipe-btn bg-primary hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition-colors w-full" data-id="${randomRecipe.id}">
                            查看完整菜谱
                        </button>
                    `;
                    
                    // 添加查看详情事件
                    content.querySelector('.view-recipe-btn').addEventListener('click', () => {
                        this.closeRandomRecipeModal();
                        this.showRecipeDetail(randomRecipe.id);
                    });
                }
                
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // 关闭随机推荐模态框
            closeRandomRecipeModal() {
                const modal = document.getElementById('randomRecipeModal');
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // 打开添加菜谱模态框
            openAddRecipeModal() {
                const modal = document.getElementById('addRecipeModal');
                const form = document.getElementById('addRecipeForm');
                form.reset();
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // 关闭添加菜谱模态框
            closeAddRecipeModal() {
                const modal = document.getElementById('addRecipeModal');
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // 保存菜谱
            saveRecipe() {
                const name = document.getElementById('recipeName').value.trim();
                const category = document.getElementById('recipeCategory').value;
                const ingredients = document.getElementById('recipeIngredients').value.trim();
                const instructions = document.getElementById('recipeInstructions').value.trim();
                const image = document.getElementById('recipeImage').value.trim();
                
                if (!name || !category || !ingredients || !instructions) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                const newRecipe = {
                    name,
                    category,
                    ingredients,
                    instructions,
                    image: image || ''
                };
                
                this.recipeManager.addRecipe(newRecipe);
                this.closeAddRecipeModal();
                this.renderRecipes();
            }

            // 显示菜谱详情
            showRecipeDetail(id) {
                const recipe = this.recipeManager.getAllRecipes().find(r => r.id === id);
                if (!recipe) return;
                
                const modal = document.getElementById('recipeDetailModal');
                const nameEl = document.getElementById('detailName');
                const categoryEl = document.getElementById('detailCategory');
                const imageEl = document.getElementById('detailImage');
                const ingredientsEl = document.getElementById('detailIngredients');
                const instructionsEl = document.getElementById('detailInstructions');
                const favoriteIcon = document.getElementById('favoriteIcon');
                
                nameEl.textContent = recipe.name;
                categoryEl.textContent = recipe.category;
                imageEl.src = recipe.image || 'https://picsum.photos/seed/food/400/300';
                imageEl.alt = recipe.name;
                
                // 设置收藏图标
                if (recipe.isFavorite) {
                    favoriteIcon.classList.remove('fa-heart-o');
                    favoriteIcon.classList.add('fa-heart');
                } else {
                    favoriteIcon.classList.remove('fa-heart');
                    favoriteIcon.classList.add('fa-heart-o');
                }
                
                // 渲染食材
                ingredientsEl.innerHTML = '';
                recipe.ingredients.split(',').forEach(ingredient => {
                    const li = document.createElement('li');
                    li.className = 'flex items-center';
                    li.innerHTML = `<i class="fa fa-circle text-xs text-primary mr-2"></i>${ingredient.trim()}`;
                    ingredientsEl.appendChild(li);
                });
                
                // 渲染步骤
                instructionsEl.innerHTML = '';
                recipe.instructions.split('\n').forEach((step, index) => {
                    if (step.trim()) {
                        const li = document.createElement('li');
                        li.className = 'pl-2 pb-2 border-b border-gray-100 last:border-0';
                        li.textContent = step.replace(/^\d+\./, '').trim();
                        instructionsEl.appendChild(li);
                    }
                });
                
                // 添加收藏切换事件
                const toggleFavoriteBtn = document.getElementById('toggleFavoriteBtn');
                toggleFavoriteBtn.onclick = () => {
                    const isFavorite = this.recipeManager.toggleFavorite(id);
                    if (isFavorite) {
                        favoriteIcon.classList.remove('fa-heart-o');
                        favoriteIcon.classList.add('fa-heart');
                    } else {
                        favoriteIcon.classList.remove('fa-heart');
                        favoriteIcon.classList.add('fa-heart-o');
                    }
                    this.renderRecipes();
                };
                
                // 添加删除事件
                const deleteBtn = document.getElementById('deleteRecipeBtn');
                deleteBtn.onclick = () => {
                    if (confirm('确定要删除这个菜谱吗？')) {
                        this.recipeManager.deleteRecipe(id);
                        this.closeRecipeDetailModal();
                        this.renderRecipes();
                    }
                };
                
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // 关闭菜谱详情模态框
            closeRecipeDetailModal() {
                const modal = document.getElementById('recipeDetailModal');
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            const recipeManager = new RecipeManager();
            const uiController = new UIController(recipeManager);
        });
    </script>
</body>
</html>
